<script lang="ts" setup>
    const value = ref<string>("测试");
</script>

<template>
    <!-- 输入框 -->
    <u-layout
        :enable-refresh="false"
        title="输入框组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <view class="line">
                <u-text text="普通输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="禁用输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                :disabled="true"
                                placeholder="请输入名称"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="只读输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                :readonly="true"
                                placeholder="请输入名称"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="前后缀图标" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                                prefix-icon="user"
                                suffix-icon="email"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="前后缀文本" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入金额"
                                prefix-text="钱"
                                suffix-text="元"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="前后缀自定义插槽" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                            >
                                <template #prefix>
                                    <view>前缀插槽</view>
                                </template>

                                <template #suffix>
                                    <view>后缀插槽</view>
                                </template>
                            </u-input>
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="无边框输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                border="none"
                                placeholder="请输入名称"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="底部框输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                border="bottom"
                                placeholder="请输入名称"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义边框颜色" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                border-color="#ff0000"
                                placeholder="请输入名称"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义背景色以及文本颜色" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                background-color="#ff0000"
                                color="#fff"
                                placeholder="请输入名称"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="两侧圆形输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                                shape="circle"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="大尺寸输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                                size="large"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="普通尺寸输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                                size="normal"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="小尺寸输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                                size="small"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="超小尺寸输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                                size="mini"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="大圆角输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                                radius="large"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="默认圆角输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                                radius="normal"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="小圆角输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                                radius="small"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="超小圆角输入框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-input
                                v-model:value="value"
                                placeholder="请输入名称"
                                radius="mini"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- //容器 -->
    </u-layout>
    <!-- //输入框 -->
</template>

<style lang="scss" scoped>
    // 容器
    .container
    {
        .line
        {
            .title
            {
                font-size: 14px;
                line-height: 20px;
            }

            .block
            {
                overflow: hidden;
                margin-top: 4px;
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }
</style>